<template>
	<z-paging ref="paging" loading-more-no-more-text="到底啦～" v-model="dataList" @query="queryList">
		<template #top>
			<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="white" @clickLeft="goBack">
				<template #left>
					<image class="size-32" src="@/static/svg/icon-back.svg" />
				</template>
				<view class="flex center w-full fs-16 text-black">我的卡劵</view>
			</uni-nav-bar>
			<view class="coupon-status-tabs flex justify-around pt-12 px-16">
				<view v-for="(tab,i) in tabs" :key="i" class="tab-item"
					:class="currentStatusTab===tab.code ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'"
					@click="onStatusTabClick(tab, i)">
					<text>{{tab.name}}</text>
				</view>
			</view>
		</template>
		<template #empty>
			<view>
				<image style="width:136px;height:136px;" src="@/static/svg/order/empty-order.svg"></image>
				<view class="mt-4 text-center fs-12 text-color-regular font-normal leading-17">暂无数据</view>
			</view>
		</template>
		<coupon-item v-for="(item,i) in dataList" :key="i" :data="item" @toUse="toUse" />
	</z-paging>
</template>

<script setup name="MyCoupon">
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		unref
	} from 'vue'
	import {
		redPacketReceiveListApi
	} from '@/api/redpacket.js'
	import CouponItem from './components/CouponItem.vue'

	const goBack = () => uni.navigateBack()

	const tabs = ref([{
			name: '未使用',
			code: 1
		},
		{
			name: '已使用',
			code: 2
		},
		{
			name: '已过期',
			code: 3
		}
	])
	const currentStatusTab = ref(1)
	const onStatusTabClick = (tab, i) => {
		if (tab.code !== currentStatusTab.value) {
			currentStatusTab.value = tab.code
			queryParams.value.state = tab.code
			paging.value.reload()
		}
	}

	const dataList = ref([])
	const paging = ref(null)
	const queryParams = ref({
		state: 1, // 状态(1-未使用，2-已使用/已核销，3-已过期)
		pageNum: 1,
		pageSize: 10,
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		redPacketReceiveListApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	const refresh = () => {
		paging.value.reload()
	}

	const needRefresh = ref(false)

	const toUse = (item) => {
		if(item.redPacketType === 2){
			uni.navigateTo({
				url: `/pagesA/merchant/homepage?id=${item.businessId}`
			})
		}else{
			console.log({item});
			const url = item.promotionType==='GROUP_BUY'
				?`/pagesB/activity/activity-group-buy`
				:`/pagesB/activity/activity`;
			uni.navigateTo({
				url: `${url}?id=${item.activeId}&_from=myCoupon`,
				success: (res) => {
					needRefresh.value = true
				}
			})
		}
	}

	onShow(() => {
		if (needRefresh.value) {
			refresh()
			needRefresh.value = false
		}
	})
</script>

<style lang="scss" scoped>
	.coupon-status-tabs {
		overflow: auto;
		white-space: nowrap;

		.tab-item {
			display: inline-flex;
			height: 30px;

			&:not(:last-child) {
				margin-right: 36px;
			}
		}

		.active {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
</style>